<template>
  <div id="order_from">
    <el-tabs v-model.trim="activeName">
      <el-tab-pane label="供货订单详情" name="1">
        <h1 style="margin-top: 5px">订单信息</h1>
        <el-form label-width="130px" class="commonFrom">
          <el-form-item label="合同编号：" style="margin-right: 500px; margin-bottom: 0 !important">
            {{ orderFrom.contractNo }}
          </el-form-item>
          <el-form-item label="工程名称：" style="margin-top: -6px; margin-bottom: 0 !important">
            {{ orderFrom.proName }}
          </el-form-item>
          <el-form-item label="供应商：" style="margin-top: -6px; margin-bottom: 0 !important">
            {{ orderFrom.providerName }}
          </el-form-item>
          <el-form-item
            label="交付地点："
            style="width: 100% !important; margin-bottom: 0px !important; margin-top: -6px"
          >
            {{ orderFrom.province }}{{ orderFrom.city }}{{ orderFrom.area }}{{ orderFrom.detailAddress }}
          </el-form-item>
          <el-form-item
            label="约定交货日期："
            style="margin-right: 500px; margin-bottom: 0 !important; margin-top: -6px"
          >
            {{ orderFrom.agreedDeliveryDate }}
          </el-form-item>
          <el-form-item label="采购商名称：" style="margin-bottom: 7px !important; margin-top: -6px">
            {{ orderFrom.enterpriseName }}
          </el-form-item>
          <el-form-item label="签约采购商：" style="margin-bottom: 7px !important; margin-top: -6px">
            {{ orderFrom.contractBuyer }}
          </el-form-item>
        </el-form>
        <h1>货品清单</h1>
        <div class="btn_box">
          <p>
            总合计：<span style="font-size: 24px; color: #333">{{ orderFrom.amountPrice }}</span
            >元
          </p>
        </div>
        <el-table
          :data="orderFrom.detailsList"
          border
          style="margin-bottom: 20px"
          class="bidding"
          tooltip-effect="light"
          ref="jdjgTable"
          :header-cell-style="{ padding: '0px', background: '#F2F3F7' }"
          :row-class-name="tabRowClassName"
        >
          <el-table-column width="60" align="center" type="index" label="序号">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="材料类型" align="center" prop="productTypes" width="160">
            <template slot-scope="scope">
              <div>
                {{ scope.row.productTypes == 1 ? '合同内' : '合同外' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="材料名称" align="center" prop="materialName" width="160"> </el-table-column>
          <el-table-column label="规格型号" align="center" prop="model" width="120"> </el-table-column>
          <el-table-column label="单位" align="center" prop="company" width="120"> </el-table-column>
          <el-table-column label="参数指标" align="center" prop="parameterIndex" width="120" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="单价" align="center" prop="unitPrice" width="140"> </el-table-column>
          <el-table-column label="数量" align="center" prop="purchaseQuantity" width="140"> </el-table-column>
          <el-table-column label="总价" align="center" prop="totalPrice" width="160" fixed="right"> </el-table-column>
        </el-table>
        <h1>送货约定</h1>
        <div style="margin-top: 20px">{{ orderFrom.agreedDelivery || '暂无说明' }}</div>
      </el-tab-pane>
      <el-tab-pane label="审核记录" name="2" v-if="isHaveReview">
        <div v-if="isComplete">
          <h1>验收清单</h1>
          <div class="upload-wrap">
            <el-upload class="upload-demo" multiple action :file-list="siteList" :on-preview="downFile"> </el-upload>
          </div>
          <h1>现场验收附件</h1>
          <el-image
            style="width: 150px; height: 150px; margin: 20px 0"
            :src="item.response.data"
            v-for="item in imgList"
            :key="item.uid"
            :preview-src-list="imgPreiewList"
          ></el-image>
        </div>
        <el-table
          :data="auditData"
          border
          class="inventory_table"
          :header-cell-style="{ padding: '0px', background: '#F2F3F7' }"
          :row-class-name="tabRowClassName"
        >
          <el-table-column width="60" align="center" type="index" label="序号">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="审核人" prop="approverName"> </el-table-column>
          <el-table-column align="center" label="审核意见" prop="approveIdea"> </el-table-column>
          <el-table-column align="center" label="审核结果" prop="approveStatus">
            <template slot-scope="scope">
              <div>
                {{ scope.row.approveStatus ? '审核通过' : '审核驳回' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="审核时间" prop="createTime"> </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="发货详情" name="3" v-if="ship">
        <h1>发货详情</h1>
        <el-form label-width="130px" class="commonFrom">
          <el-form-item label="订单编号：" style="margin-bottom: -6px !important"> {{ shipFrom.orderNo }}</el-form-item>
          <el-form-item label="关联合同：" style="margin-bottom: -6px !important">
            {{ shipFrom.contractNo }}-{{ shipFrom.proName }}
          </el-form-item>
          <el-form-item label="物流方式：" style="margin-bottom: -6px !important">
            {{ shipData.deliveryType == 1 ? '自发物流' : '其他物流' }}
          </el-form-item>
          <el-form-item label="约定交货日期：" style="margin-bottom: -6px !important">
            {{ shipFrom.agreedDeliveryDate }}
          </el-form-item>
          <el-form-item label="交付地点：" style="width: 100% !important">
            {{ shipFrom.province }}{{ shipFrom.city }}{{ shipFrom.area }}{{ shipFrom.detailAddress }}
          </el-form-item>
        </el-form>
        <div style="margin-bottom: 20px">
          以下甲方即指合同中采购方，乙方即指合同中的供应方:乙方根据甲方实际需要，以{{ shipFrom.takeEffectDate }}签订的
          《 {{ shipFrom.contractNo }}-{{ shipFrom.proName }}》 为依据，乙方将按下表所列材料(设备)名
          称、品牌、型号.规格、数量.交货日期送至甲方指定的交货地点送货。
        </div>
        <div class="btn_box">
          <p>
            总合计：<span style="font-size: 24px; color: #333">{{ shipData.realAmountPrice || '0' }}</span
            >元
          </p>
        </div>
        <div style="margin-bottom: 20px">
          <el-table
            :data="shipData.orderDeliveryDetailsList"
            border
            class="bidding"
            ref="jdjgTable"
            :header-cell-style="{ padding: '0px', background: '#F2F3F7' }"
            :row-class-name="tabRowClassName"
          >
            <el-table-column width="60" align="center" type="index" label="序号">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="材料类型" align="center" prop="productTypes" width="160">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.productTypes == 1 ? '合同内' : '合同外' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="材料名称" align="center" prop="materialName" width="160"> </el-table-column>
            <el-table-column label="规格型号" align="center" prop="model" width="120"> </el-table-column>
            <el-table-column label="单位" align="center" prop="company" width="120"> </el-table-column>
            <el-table-column label="参数指标" align="center" prop="parameterIndex" width="120" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="单价" align="center" prop="unitPrice" width="140"> </el-table-column>
            <el-table-column label="数量" align="center" prop="purchaseQuantity" width="140"> </el-table-column>
            <el-table-column label="总价" align="center" prop="totalPrice" width="160" fixed="right"> </el-table-column>
          </el-table>
        </div>
        <h1>物流信息</h1>
        <el-form label-width="130px" class="commonFrom">
          <el-form-item label="物流方式：" style="margin-bottom: -6px !important">
            {{ shipData.deliveryType == 1 ? '自发物流' : '其他物流' }}
          </el-form-item>
          <el-form-item label="车牌号：" style="margin-bottom: -6px !important" v-if="shipData.deliveryType == 1">
            {{ shipData.licenseNumber || '--' }}
          </el-form-item>
          <el-form-item label="物流单号：" style="margin-bottom: -6px !important" v-else>
            {{ shipData.trackingNumber || '--' }}
          </el-form-item>
          <el-form-item label="发货日期：" style="margin-bottom: -6px !important; margin-right: 400px">
            {{ shipData.deliveryDate || '--' }}
          </el-form-item>
          <el-form-item label="承运人：">
            {{ shipData.carrier || '--' }}
          </el-form-item>
          <el-form-item label="承运人联系电话：">
            {{ shipData.carrierPhone || '--' }}
          </el-form-item>
        </el-form>
        <h1>联系方式</h1>
        <el-form label-width="130px" class="commonFrom">
          <el-form-item label="供应方联系人：" style="margin-bottom: -6px !important">
            {{ shipData.supplier || '--' }}
          </el-form-item>
          <el-form-item label="供应方联系电话：" style="margin-bottom: -6px !important">
            {{ shipData.supplierPhone || '--' }}
          </el-form-item>
          <el-form-item label="验收联系人：" style="margin-bottom: 3px">
            {{ shipFrom.acceptance || '--' }}
          </el-form-item>
          <el-form-item label="验收联系电话：" style="margin-bottom: 3px">
            {{ shipFrom.acceptancePhone || '--' }}
          </el-form-item>
        </el-form>
        <h1>发货附件上传</h1>
        <div class="upload-wrap">
          <el-upload
            class="upload-demo"
            multiple
            accept=".jpg,.png,.pdf"
            action
            :file-list="fileList"
            :on-preview="downFile"
          >
          </el-upload>
        </div>
        <div v-if="shipImgList.length" style="margin: 0 0 20px">
          <el-image
            style="width: 150px; height: 150px; margin-right: 20px"
            :src="item"
            v-for="(item, index) in shipImgList"
            :key="index"
            :preview-src-list="shipImgList"
          ></el-image>
        </div>
        <h1>验收说明</h1>
        <div style="margin-top: 20px">{{ shipData.acceptanceDescription || '暂无说明' }}</div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  props: {
    orderObj: {
      type: Object,
      default: () => {
        return {}
      }
    },
    isHaveReview: {
      type: Boolean,
      default: true
    },
    isComplete: {
      type: Boolean,
      default: false
    },
    ship: {
      type: Boolean,
      default: false
    },
    orderId: {
      type: [String, Number],
      require: true
    }
  },
  data() {
    return {
      imgPreiewList: [],
      imgList: [],
      siteList: [],
      shipData: {},
      fileList: [],
      shipFrom: {},
      shipImgList: [],
      auditData: [],
      orderFrom: {},
      activeName: '1'
    }
  },
  mounted() {
    if (JSON.stringify(this.orderObj) != '{}') {
      if (this.ship) {
        this.orderFrom = this.orderObj.contractOrderDetails
        this.shipFrom = JSON.parse(JSON.stringify(this.orderObj.orderDeliveryDetail))
        this.shipData = this.orderObj.orderDeliveryDetail.contractOrderDeliveryDto
        JSON.parse(this.shipData.attachUrl).forEach(item => {
          let index = item.response.data.lastIndexOf('.')
          let suffix = item.response.data.substring(index + 1, item.length)
          if (suffix == 'jpg' || suffix == 'png' || suffix == 'jpeg') {
            this.shipImgList.push(item.response.data)
          } else {
            this.fileList.push(item)
          }
        })
        let price = 0
        this.shipData.orderDeliveryDetailsList.forEach(item => {
          price = price + +item.totalPrice
        })
        this.$set(this.shipData, 'realAmountPrice', price)
      } else {
        this.orderFrom = this.orderObj
      }
      return false
    }
    this.getOrderData()
    this.getReviewerList()
    if (this.ship) {
      this.getShipData()
    }
  },
  methods: {
    downFile(file) {
      this.common
        .getBlob(file.response.data)
        .then(res => {
          this.common.saveAs(res, file.name)
        })
        .catch(err => {
          console.log(err)
        })
    },
    tabRowClassName({ row, rowIndex }) {
      let index = rowIndex + 1
      if (index % 2 == 0) {
        return 'warning-row'
      }
    },
    getOrderData() {
      this.$https({
        method: 'post',
        url: '/contractOrder/contractOrderDetails?id=' + this.orderId
      })
        .then(res => {
          if (res.code === 0) {
            this.orderFrom = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    getReviewerList() {
      this.$https({
        method: 'post',
        url: '/contractOrder/approveHistoryList?id=' + this.orderId
      })
        .then(res => {
          if (res.code == 0) {
            if (this.isComplete) {
              this.imgList = JSON.parse(res.data.acceptAttachUrl)
              this.imgList.forEach(item => {
                this.imgPreiewList.push(item.response.data)
              })
              this.auditData = res.data.historyList
              this.siteList = JSON.parse(res.data.acceptListUrl)
            } else {
              this.auditData = res.data.historyList
            }
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    getShipData() {
      this.$https({
        method: 'post',
        url: '/contractOrder/orderDeliveryDetail?id=' + this.orderId
      })
        .then(res => {
          if (res.code == 0) {
            this.shipFrom = JSON.parse(JSON.stringify(res.data))
            this.shipData = res.data.contractOrderDeliveryDto
            JSON.parse(this.shipData.attachUrl).forEach(item => {
              let index = item.response.data.lastIndexOf('.')
              let suffix = item.response.data.substring(index + 1, item.length)
              if (suffix == 'jpg' || suffix == 'png' || suffix == 'jpeg') {
                this.shipImgList.push(item.response.data)
              } else {
                this.fileList.push(item)
              }
            })
            let price = 0
            this.shipData.orderDeliveryDetailsList.forEach(item => {
              price = price + +item.totalPrice
            })
            this.$set(this.shipData, 'realAmountPrice', price)
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="less" scoped>
#order_from {
  /deep/ .el-tabs__header {
    margin: 0 0 30px !important;
  }
}
.upload-wrap {
  /deep/.el-upload {
    display: none;
  }
  /deep/.el-upload-list {
    display: flex;
    align-items: center;
    width: 600px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    .el-upload-list__item {
      width: 260px;
      margin: 20px 30px 0 0;
      background: #f0f1f2;
      border: 1px solid #d6d6d6;
    }
    .el-upload-list__item-name:hover {
      color: #fa7355;
    }
    .el-icon-close {
      &:hover {
        color: #fa7355;
      }
    }
    .el-upload-list__item.is-success .el-upload-list__item-status-label {
      display: none;
    }
    .el-upload-list__item .el-icon-close {
      display: none;
      &:hover {
        display: none;
      }
    }
    .el-upload-list__item .el-icon-close-tip {
      display: none;
      &:hover {
        display: none;
      }
    }
  }
}
.btn_box {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}
.commonFrom {
  margin-top: 7px;
  width: 88%;
  .el-form-item {
    width: 40% !important;
    margin-bottom: 7px !important;
  }
  .form-item {
    width: 100% !important;
    /deep/.el-form-item__content {
      display: flex;
    }
    .el-input {
      width: 260px;
    }
  }

  .performance_text {
    color: #999;
    font-size: 14px;
  }
  .icon-guanbianniu {
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
  }
  .icon-guanbianniu:hover {
    color: #fa7355;
  }
}
h1 {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  padding-left: 10px;
  border-left: 4px solid #fa7355;
  span {
    font-weight: normal;
    color: #999;
  }
}
</style>
